import { useRoutes, Navigate } from "react-router-dom";

import Home from "../views/Home";
import About from "../views/About";
import AddOrEdit from "../views/AddOrEdit";
import Detail from "../views/Detail";
import Settings from "../views/Settings";
import Asynchronous from "../views/Asynchronous";
import CoreConcept from "../views/CoreConcept";

function Router() {
  return useRoutes([
    {
      path: "/",
      element: <Home />,
    },
    {
      path: "/about",
      element: <About />,
      children: [
        {
          path: "core-concept",
          element: <CoreConcept />,
        },
        {
          path: "asynchronous",
          element: <Asynchronous />,
        },
        {
          path: "",
          element: <Navigate replace to="core-concept" />,
        },
      ],
    },
    {
      path: "/settings",
      element: <Settings />,
    },
    {
      path: "/add",
      element: <AddOrEdit />,
    },
    {
      path: "/detail/:id",
      element: <Detail />,
    },
    {
      path: "/edit/:id",
      element: <AddOrEdit />,
    },
  ]);
}

export default Router;
